Post by tag
按标签聚合
包含 # css自定义 的文章列表
破折号作者自动右对齐
破折号作者自动右对齐
效果预览:左边是源文本,右边是在 obsidian 中的显示效果,破折号及其之后的内容自动右对齐 ![](https://cdn.pkmer.cn/images/20240802110947.png!pkmer) 安装 regex-mark 插件,按如下配置 ——.,dashright ![](https://cdn.pkmer.cn/images/20240802111252.png!pkmer) 添加 css (待完善,regex-mark 插件教程和使用示例,可先学习 Dynamic-Highlights插件的几种使用场景
![calmwaves](https://cdn.pkmer.cn/covers/calmwaves.jpeg!nomark)
calmwaves
Pkmer
Obsidian 样式 - 悬浮侧边栏自动弹出,提升工作流效率
悬浮侧边栏自动弹出,提升工作流效率
介绍一个 “悬浮侧边栏自动弹出” 的 CSS,它通过添加悬浮侧边栏和自动弹出功能。 自动悬浮两侧菜单栏的效果: 2024-04-04Obsidian样式-悬浮侧边栏自动弹出,提升工作流效率IMG-1 1. 悬浮侧边栏:该 CSS 添加了一个悬浮侧边栏,使用户可以随时访问常用的工具和功能,无需切换页面或使用键盘快捷键。 2. 自动弹出:当用户进入 Obsidian 编辑器或切换到特定工作区时,悬浮侧边栏会自动弹出,节省了手动打开的步骤,提高了工作效率。 3. 可调整的透明度:用户可以根据自己的喜好,调整悬浮侧边栏的透明度,以适应
![熊猫别熬夜](https://cdn.pkmer.cn/covers/熊猫别熬夜.jpeg!nomark)
熊猫别熬夜
Pkmer
Obsidian 样式 - 控制属性面板 (YAML) 的显示状态
该 CSS 用来详细调节 Yaml 在编辑模式、阅读模式和源码模式下的显示状态,您可以通过 Style Setting 插件灵活地控制 Yaml 的显示状态,使编辑、阅读和查看源码时更符合您的需求。
该 CSS 用来详细调节 Yaml 在编辑模式、阅读模式和源码模式下的显示状态,您可以通过 Style Setting 插件灵活地控制 Yaml 的显示状态,使编辑、阅读和查看源码时更符合您的需求。 2024-04-07Obsidian样式-控制属性面板(YAML)的显示状态IMG-1 2024-04-07Obsidian样式-控制属性面板(YAML)的显示状态IMG-4 css / @settings name: 【Properties】控制Yaml的显示情况 id: 【Properties】控制Yaml的显示情况 sett
![熊猫别熬夜](https://cdn.pkmer.cn/covers/熊猫别熬夜.jpeg!nomark)
熊猫别熬夜
Pkmer
Obsidian 样式:调整图片不同布局样式
Obsidian 样式 - 调整图片不同布局样式,将图片渲染为圆形或者控制图片在文本的左侧或者右侧,可组合。
在整理侧边栏索引界面时,@熊猫别熬夜 帮忙写了一个让图片变圆的 css,后面@熊猫别熬夜 拓展了用法,目前能支持的功能包括: 1. 将图片渲染为圆形。 2. 控制图片在文本的左侧或者右侧。 这两个效果在功能上不会冲突,允许同时使用 注:以下测试图片来自:英国 1927 剧团的话剧《roots》的剧照 Obsidian 样式 - 调整图片不同布局样式 Obsidian 样式 - 调整图片不同布局样式
![余月鱼鸽](https://cdn.pkmer.cn/covers/余月鱼鸽.jpeg!nomark)
余月鱼鸽
Pkmer
Obsidian 样式 - 专注标签页边框
模仿Colorful Note Borders插件,针对激活的窗口进行添加边框
模仿 Colorful Note Borders 插件,针对激活的窗口进行添加边框 Obsidian 样式-专注标签页边框
![熊猫别熬夜](https://cdn.pkmer.cn/covers/熊猫别熬夜.jpeg!nomark)
熊猫别熬夜
Pkmer
Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区
通过修改 Html 语法中的details语法的样式来使它更像一个评论信息。
Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 通过修改 Html 语法中的 <details>评论区</details> 语法的样式来使它更像一个评论信息。 如果 <details> 在一个段落中可以渲染包括图片甚至是嵌入文档的渲染: Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 Obsidian 样式 - 调整 Html 的 detail 样
![熊猫别熬夜](https://cdn.pkmer.cn/covers/熊猫别熬夜.jpeg!nomark)
熊猫别熬夜
Pkmer
Obsidian 样式:自定义链接前缀图标
自定义链接前缀图标
该样式会根据前缀来给不同格式的文档添加前缀图标: 通过 .internal-link[href=".pdf"]::before 匹配不同文件类型格式,通过修改 content:url() 里面的 SVG 数据的内容可以定义不同文件类型的图标。 css / 如何配置图标参考: Obsidain 样式:美化自定义文件夹图标/ /内部链接/ .internal-link::before { content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='n
![熊猫别熬夜](https://cdn.pkmer.cn/covers/熊猫别熬夜.jpeg!nomark)
熊猫别熬夜
Pkmer
Obsidian 外观:1.4 Properties 新特性如何在阅读模式下隐藏
Obsidian 外观:1.4 Properties 新特性如何在阅读模式下隐藏
新的 Obsidian 更新带来了很多惊喜,还有更强的稳定性。 但是一些老的示例库仓库,还有 snippets 片段就会失效 比如 BT 示例库中小伙伴就会提问,更新后出现了属性交互菜单影响展示的情况 image.png450 依然可以通过 cssClass 进行处理 在 snippets 下新建样式文件,并输入如下内容 保存成 后缀名.css,文件名大家随意 然后在 Obsidian 设置 -外观 中找到并打开 最后,在你需要隐藏的页面,新增 cssClass 属性,并输入 noprop,即可
![OS](https://cdn.pkmer.cn/covers/juestchaos.jpeg!nomark)
OS
Pkmer
Obsidian 样式:自定义大纲缩进线样式
Obsidian样式:自定义大纲缩进线样式
大纲可以帮助我们简单梳理带有层级结构的框架,整理自己的思路概况。 但是默认样式的大纲线略微有些纤细,在深色主题下可能不够明显,除了通过彩色大纲线进行优化外,还可以优化本身的粗细来实现。 CSS /实时编辑模式/ .markdown-source-view.mod-cm6 .cm-indent::before { border-right: 1px solid var(--indentation-guide-color) !important; } /阅读模式/ .markdown-rendered.show-indentati
![OS](https://cdn.pkmer.cn/covers/juestchaos.jpeg!nomark)
OS
Pkmer